<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sistema Entretenimiento Familiar</title>
<link rel=StyleSheet href="css/style.css" title="Contemporaneo"/>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>  

<script language="javascript" type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="Scripts/jquery_1.4.js"></script>
<script type="text/javascript" src="Scripts/jquery_validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">	
    $(function () {
        $(".texto").bind("focus", function () {
            $(this).css("background-color", "#ECF8E0");
        });
        $(".texto").bind("blur", function () {
            $(this).css("background-color", "white");
        });
    });
    
    $(function () {
        $('#frmLogin').validate({
            rules: {
                'txtUsuario': { required: true, email: true },
                'txtClave': 'required'                   
            },
            messages: {
                'txtUsuario': { required: 'Ingr. Email', email: 'Formato incorrecto' },
                'txtClave': 'ingr. Clave'                             
            },
            //debug: true,
            error: "error",
            /*errorElement: 'div',*/
            errorContainer: $('#frmLogin label.error'),
            /*submitHandler: function (form) {
                alert('El formulario ha sido validado correctamente!');
            }*/
        });
    });    
 </script>
 
 <style type="text/css">  
label.error {
        background: url(images/i.error.gif) no-repeat left;        
        padding-left: 20px;
        margin-left: .3em;
        font-size: 15px;
        color:red;
    }
    
    label.valid {
        /*background: url(images/bon.left.salir.gif) repeat;*/
        background-color:green;
        display: float;
        width: 16px;
        height: 16px;
        color:green;
    }  
</style>
</head>
<body>
<form name="frmLogin" id="frmLogin" action="menu.html" method="post">
 <!-- Cabecera -->
    <div class="cabecera">
    	<table border="0" cellpadding="0" cellspacing="0" width="95%">
        	<tr>
            	<td width="80%"><div class="titulo">Sistema Entretenimiento Familiar</div></td>
                <td width="20%" style="text-align:right">&nbsp;</td>
          </tr>
        </table>
    </div>
    <!-- Cuerpo -->
    <div style="margin-top:15%;"><!-- mdi  -->
    	
            <center>
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                        <div class="cuadro">
                            <table border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                          <td class="label">&nbsp;</td>
                                          <td rowspan="9">
                                            <img src="images/logIndex.png" style="margin-left:30px;" />                                      </td>
                                      </tr>
                                <tr>
                                    <td class="label">Usuario :</td>
                                </tr>
                                <tr><td><input type="text" id="txtUsuario" name="txtUsuario" class="texto" /></td></tr>
                                <tr><td class="label">Clave :</td></tr>
                                <tr><td><input type="password"  id="txtClave" name="txtClave" class="texto" /></td></tr>
                                <tr>
                                  <td class="label">${MENSAJE}&nbsp;</td>
                                </tr>
                                <tr>
                                <td>  
                                  		<a href="ResponsableFamilia.html">
                                  		<img src="images/regresar.png" style="margin-right:30px;" title='"Nuevo Responsable de Familia"'/>
                                  		</a>
                                  	</td>
                                  <td align="right"><input type="submit" value="Ingresar" class="boton" /></td>
                                </tr>
                                <tr><td class="label">&nbsp;</td></tr>
                            </table>
                        </div>
                        </td>
                    </tr>
                </table>
            </center>
        
    </div>
    <!-- Pie -->
    <div class="pie"><b>Sistema Entretenimiento Familiar</b> <br />Derechos reservados &reg; <b>factorysoft</b> - 2012</div>
    </form>
</body>
</html>